﻿@namespace ServiceStack.Blazor.Components.Tailwind
@inherits UiComponentBase

<ModalDialog Id=@Id Show=@Show Close="Done" SizeClass="w-full sm:max-w-prose">
    <div class="bg-white dark:bg-black px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
        <div class="">
            <div class="mt-3 text-center sm:mt-0 sm:mx-4 sm:text-left">
                <h3 class="text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">Query Preferences</h3>

                <div class="mt-4">
                    <label for=@($"{Id}-take") class="block text-sm font-medium text-gray-700 dark:text-gray-300">Results per page</label>
                    <select id=@($"{Id}-take") @bind="Model.Take"
                            class="mt-1 block w-full pl-3 pr-10 py-2 text-base bg-white dark:bg-black border-gray-300 dark:border-gray-700 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md">
                        @foreach (var take in allTakes)
                        {
                            <option class="text-black dark:text-white" value=@take>@take</option>
                        }
                    </select>
                </div>

                <div class="mt-4 flex items-center py-4 border-b border-gray-200 dark:border-gray-800">
                    <input type="radio" id=@($"{Id}-allColumns") @onclick=@(_ => Model.SelectedColumns.Clear()) checked=@(Model.SelectedColumns.Count == 0)
                           class="focus:ring-indigo-500 h-4 w-4 bg-white dark:bg-black text-indigo-600 dark:text-indigo-400 border-gray-300 dark:border-gray-700">
                    <label class="ml-3 block text-gray-700 dark:text-gray-300" for=@($"{Id}-allColumns")>View all columns</label>
                </div>

                <div class="mt-4">
                    <div class="pb-2 px-4">
                        <div class="">
                            @foreach (var c in Columns)
                            {
                                <div key=@c.Name class="flex items-center">
                                    <input type="checkbox" id=@c.Name checked=@Model.SelectedColumns.Contains(c.Name) @oninput="x => columnSelected(c, x.Value)"
                                       class="h-4 w-4 bg-white dark:bg-black border-gray-300 dark:border-gray-700 rounded text-indigo-600 dark:text-indigo-400 focus:ring-indigo-500">
                                    <label for=@c.Name class="ml-3 dark:text-gray-50">@c.Name</label>
                                </div>
                            }
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>
    <div class="bg-gray-50 dark:bg-gray-900 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
        <PrimaryButton @onclick="save" Style="ButtonStyle.Red" class="ml-2">
            Save
        </PrimaryButton>
        <SecondaryButton @onclick="async _ => await Done.InvokeAsync()">
            Cancel
        </SecondaryButton>
    </div>
</ModalDialog>
